<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/nav.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/nav1.js"></script>
</head>

<body>
    <div class="wrapHeader"></div>
</body>
<script>
    // 载入公共头部的本质  => 通过ajax请求(对应的html结构) => 放到指定元素中

    // 问题?
    // ajax异步请求  => nav.js加载时(html结构还未生成) => js无效
    // 1. 生成之后在绑定 => 不是很合适(nav.js 已提取独立的js文件)
    //    升级: 等页面html生成完毕之后 动态的载入nav.js

    // 2. 利用事件委托绑定事件 (可以给未来生成的元素绑定事件)

    // $.ajax({
    //     type: "get",
    //     url: "./nav.html",
    //     // dataType: "html",
    //     success: function (html) {
    //         // console.log(html);
    //         $(".wrapHeader").html(html);
    //     }
    // })


    $(".wrapHeader").load("./nav.html");


</script>

</html>